<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link rel="stylesheet" href="css/pirs.css" type="text/css" />
        <script type="text/javascript" src="script/jquery-1.6.1.js"></script>
        <script type="text/javascript" src="script/jquery.form.js"></script>
        <title>Prototipe IR Sistem</title>
        
        <script>
        $(document).ready(function(){
            var options = { 
                target:        'body',   // target element(s) to be updated with server response 
                beforeSubmit:  doSubmitAnim,  // pre-submit callback 
                success:       showResponse  // post-submit callback 
                //dataType:  null        // 'xml', 'script', or 'json' (expected server response type) 
            }; 

            $("#form-opt").submit(function(e) {

                $(this).ajaxSubmit(options); 
                return false; 
            });  

            $("#does").click(function(){
                $("#does").fadeOut("slow"); 
                $("#doex").fadeOut("slow"); 
                $("table.opt-table").fadeOut("slow",function(){
                    $("#search-opt").fadeIn("slow"); 
                    $("#back").fadeIn("slow"); 
                    $("#exes").fadeIn("slow"); 
                }); 
            });
            $("#doex").click(function(){
                $("#does").fadeOut("slow"); 
                $("#doex").fadeOut("slow"); 
                $("table.opt-table").fadeOut("slow",function(){
                    $("#exper-opt").fadeIn("slow"); 
                    $("#back").fadeIn("slow"); 
                    $("#exex").fadeIn("slow"); 
                }); 
            });
            $("#back").click(function(){
                $("#exper-opt").fadeOut("slow"); 
                $("#search-opt").fadeOut("slow"); 
                $("#back").fadeOut("slow",function(){
                    $("table.opt-table").fadeIn("slow",function(){});
                        $("#does").fadeIn("slow"); 
                        $("#doex").fadeIn("slow");  
                }); 
                $("#exes").fadeOut("slow"); 
                $("#exex").fadeOut("slow"); 
            });

            $("#exex").click(function(){
                $("#form-opt").attr("action", "<?=base_url()?>index.php/n/experiment").submit();
            });

            $("#exes").click(function(){
                $("#form-opt").attr("action", "<?=base_url()?>index.php/n/search").submit();
//                    $("#form-opt").attr("action", "search.php").submit();
            });
        });

        function showResponse(responseText, statusText, xhr, $form)  { 
//            alert('status: ' + statusText + '\n\nresponseText: \n' + responseText + 
//                '\n\nThe output div should have already been updated with the responseText.'); 
        } 
        function doSubmitAnim(){
            
        }
        </script>
    </head>
    <body>
        <div id="header">STBI: Prototipe IR Sistem</div>
        <div id="container" style="width: 960px; margin: 0px auto;">
            
            <div id="options">
                <form action="" name="form-opt" id="form-opt" method="post"  enctype="multipart/form-data" encoding="multipart/form-data">
                    <table class="opt-table">
                        <tr>
                            <td colspan="2">Document Option</td>
                            <td colspan="2">Query Option</td>
                        </tr>
                        <tr>
                            <td>Term Frequency</td>
                            <td>IDF - Normalization</td>
                            <td>Term Frequency</td>
                            <td>IDF - Normalization</td>
                        </tr>
                        <tr>
                            <td>
                                <input type="radio" name="otf" value="raw" checked="checked" /> Raw TF <br/>
                                <input type="radio" name="otf" value="log" /> Log TF <br/>
                                <input type="radio" name="otf" value="aug" /> Augmented TF <br/>
                                <input type="radio" name="otf" value="bin" /> Binary TF <br/>
                            </td>
                            <td>
                                <input type="checkbox" name="oidf" value="yes" checked="checked" /> Use IDF <br/>
                                <input type="checkbox" name="onorm" value="yes" /> Use Normalization <br/>
                            </td>
                            <td>
                                <input type="radio" name="qtf" value="raw" checked="checked" /> Raw TF <br/>
                                <input type="radio" name="qtf" value="log" /> Log TF <br/>
                                <input type="radio" name="qtf" value="aug" /> Augmented TF <br/>
                                <input type="radio" name="qtf" value="bin" /> Binary TF <br/>
                            </td>
                            <td>
                                <input type="checkbox" name="qidf" value="yes" /> Use IDF <br/>
                                <input type="checkbox" name="qnorm" value="yes" /> Use Normalization <br/>
                            </td>
                        </tr>
                    </table>
                    <table class="opt-table">
                        <tr>
                            <td colspan="3">Additional Option</td>
                        </tr>
                        <tr>
                            <td>
                                <input type="checkbox" name="stem" value="yes"/> Use Stemming <br/>
                                <input type="checkbox" name="stop" value="yes"/> Kill Stopwords <br/>
                            </td>
                            <td style="width: 330px">
                                Document File : <input type="file" name="docfile" /> <br/>
                            </td>
                            <td style="width: 330px">
                                Stopwords File : <input type="file" name="stopfile" /> <br/>
                            </td>
                        </tr>
                    </table>
                    <div id="search-opt" style="display: none; text-align: center;margin-top: 50px;">
                        <span style="font-size: 1.2em;">Query :</span><br/> <br/> <input style="font-size: 1.5em; height: 40px;width: 400px;" type="text" name="query"/>
                    </div>
                    <div id="exper-opt" style="display: none; text-align: center;margin-top: 50px;">
                        <span style="font-size: 1.2em;">Query File :</span><br/> <input type="file" name="queryfile" /> <br/><br/>
                        <span style="font-size: 1.2em;">Relevant Judgement File :</span><br/> <input type="file" name="relfile" /> <br/>
                    </div>
                </form>
                <div style="text-align: right; margin-top: 100px;">
                    <button id="doex" class="do">Do Experiment</button><br/>
                    <button id="does" class="do">Do Search</button>

                    <button id="back" class="do" style="display: none">Back</button>
                    <button id="exex" class="do" style="display: none">Execute</button>
                    <button id="exes" class="do" style="display: none">Execute</button>
                </div>
            </div>
        </div>
        <div id="footer">Albadr - Sidik - Fikri - Nur Adi</div>
    </body>
</html>
